<template>
  <div class="energy-table">
    <div class="table-title">
      <h2>{{year}}年{{month}}月临安区公共机构能源消耗申报表</h2>
    </div>
    <div class="table-content">
      <div class="table-select">
        <div class="table-selectItem">
          <label>填报单位：</label>
          <select style="max-width: 280px;" v-model="departName" @change="doSearch()">
            <option :key="i" v-for="(item,i) in departments" :value="item">{{item}}</option>
          </select>
        </div>
        <div class="table-selectItem">
          <div class="table-selectItem">
            <label>时间：</label>
            <select style="width:70px;" v-model="year" @change="doSearch()">
              <option :key="n" v-for="n in selectYear" :value="n">{{n}}</option>
            </select> 年
            <select style="width:70px;" v-model="month" @change="doSearch()">
              <option :key="n" v-for="n in 12" :value="n">{{n}}</option>
            </select> 月
          </div>
        </div>
        <div class="table-selectItem">
          <label>制表：</label>
          <input type="text" class="tableSelect-input" v-model="objDetail.OfficeAddress">
        </div>
      </div>
      <table width="100%" border="1" cellpadding="10">
        <thead style="background-color:#E7F3FF;">
          <tr height="35px;">
            <th style="width:40px;">序号</th>
            <th>车牌号</th>
            <th>车型</th>
            <th>购置时间</th>
            <th>排量</th>
            <th>本月里程(千米)</th>
            <th>本月油耗(升)</th>
            <th>金额(元)</th>
          </tr>
        </thead>
        <tbody>
          <tr :key="index" v-for="(item,index) in carData ">
            <td>{{index+1}}</td>
            <td>{{item.Car.Number}}</td>
            <td>{{item.Car.Type}}</td>
            <td>{{item.Car.BoughtAt.substring(0,11)}}</td>
            <td>{{item.Car.Displacement}}</td>
            <td>
              <input type="text" v-model="item.Kilometres">
            </td>
            <td>
              <input type="text" v-model="item.FuelConsumption">
            </td>
            <td>
              <input type="text" v-model="item.Amount">
            </td>
          </tr>
          <!--<tr>
                <td colspan="10" align="center" valign="middle">
                  <a :key="n" :class="[pageIndex==n?'selectedA':'']" v-for="n in pageCount" @click="doSearch(n)">{{n}}</a>
                </td>
              </tr>-->
        </tbody>
      </table>
      <div class="table-button">
        <input type="button" value="保存" @click="addOil" v-if="objDetail.State!=1">
        <input type="button" value="打印" @click="prints()">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [],
      departName: '',
      selectYear: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      pageCount: 1,
      pageIndex: 1,
      carData: [],
      objDetail: {
        State: '',
        OfficeAddress: ''
      }
    }
  },
  methods: {
    async getDepartments() {
      const result = await this.$get("/api/user/departments");
      this.departments = result
      this.departName = result[0];
      this.getCarList()
    },
    doSearch() {
      this.getCarList();
    },
    prints() {
      if (window.print != null) {
        window.print();
      }
      else {
        alert('您没有安装打印机，请安装后继续!')
      }
    },
    async addOil() {
      this.objDetail.Year = this.year
      this.objDetail.Month = this.month
      this.objDetail.DepartmentName = this.departName
      const datas = this.carData.map((i) => {
        delete i.Car;
        return i;
      });
      this.objDetail.Details = datas;
      try {
        const result = await this.$post("/api/CarFuel", this.objDetail)
        alert('操作成功！')
        this.getCarList()
        console.log(result)
      }
      catch (error) {
        alert(error.message)
      }
    },

    async getCarList() {
      console.log(this.departName)
      console.log(this.year)
      console.log(this.month)
      const result = await this.$get('/api/CarFuel', { departmentName: this.departName, year: this.year, month: this.month })
      this.carData = result.Details;
      this.objDetail.State = result.State
      this.objDetail.Id = result.Id
      console.log(result)
    }
  },
  created() {
    var num = new Date().getFullYear();
    for (var i = num - 13; i < num + 1; i++) {
      this.selectYear.unshift(i);
    }
    this.getDepartments();
  }
}
</script>

<style lang="scss" scoped>
.energy-table {
  padding: 25px 0;
}

.table-title {
  height: auto;
  margin-bottom: 25px;
  h2 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 16px;
  }
  span {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
  }
}

.table-content {
  height: auto;
  .table-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    .table-selectItem {
      select,
      input {
        height: 24px;
      }
      input.tableSelect-input {
        border: none;
        outline: none;
        border-bottom: 1px solid rgb(169, 169, 169);
        width: 280px;
      }
    }
  }
  table {
    td {
      padding: 8px 5px;
      text-align: center;
      input {
        height: 22px;
        width: 80px;
        padding: 0 5px;
        outline: none;
        border-radius: 5px;
        border: 1px solid darkgray;
      }
      a {
        margin-left: 10px;
        &:hover {
          text-decoration: underline;
          color: #0000FF;
          cursor: pointer;
        }
      }
      a.selectedA {
        font-weight: bold;
        text-decoration: underline;
        font-size: 15px;
      }
    }
  }
  .table-button {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    input {
      width: 60px;
      margin-left: 25px;
    }
  }
}
</style>
